<template>
    <p>自由组合式api</p>
    <p>a:{{ a }}</p>
    <p>name: {{ name }}</p>
    <p>reactive==============================</p>
    <p>obj:{{ obj }}</p>
    <p>num = {{ num }}</p>
    <button @click="AddOne">AddOne</button>
    <button @click="AddFive">AddFive</button>
</template>


<script setup>
import {ref,reactive} from 'vue'
    const a = ref(0)
    const name=ref('tom')
    console.log(a)
    console.log(a.value)
    const obj = reactive({
            name:'tom',
            age:12,
    })
    const num = ref(0)
    const AddOne =()=>{
        return num.value++;
    }
    function AddFive(){
        num.value+=5;
    }
</script>